<template>
    <div>委托交易单
        <Table :columns="columns1" :data="data1"  :row-class-name="rowClassName"></Table>
    </div>
</template>

<script>
import { getOrder } from '@/api/order'

export default {
    name: 'OrderBook',
    props: {
        stockId: {
            type: Number,
            default: 1,
        },
    },
    data() {
        return {
            columns1: [
                {
                    title: '价格',
                    key: 'price',
                },
                {
                    title: '数量',
                    key: 'undealed',
                },
                {
                    title: '类型',
                    key: 'type',
                    render: (h, params) => {
                        const row = params.row
                        // eslint-disable-next-line no-nested-ternary
                        const color = row.type === false ? 'success' : 'error'
                        // eslint-disable-next-line no-nested-ternary
                        const text = row.type === false ? '买' : '卖'

                        return h('Tag', {
                            props: {
                                type: 'dot',
                                color,
                            },
                        }, text)
                    },
                },
            ],
            data1: [
                {
                    name: 'John Brown',
                    age: 18,
                    address: 'New York No. 1 Lake Park',
                    date: '2016-10-03',
                },
                {
                    name: 'Jim Green',
                    age: 24,
                    address: 'London No. 1 Lake Park',
                    date: '2016-10-01',
                },
                {
                    name: 'Joe Black',
                    age: 30,
                    address: 'Sydney No. 1 Lake Park',
                    date: '2016-10-02',
                },
                {
                    name: 'Jon Snow',
                    age: 26,
                    address: 'Ottawa No. 2 Lake Park',
                    date: '2016-10-04',
                },
            ],
        }
    },
    methods: {
        rowClassName(row, index) {
            if (row.type === false) {
                return 'buy-green-bg'
            }
        },
        update() {
            getOrder({ stock: this.stockId }).then(res => {
                console.log(res.results)
                this.data1 = res.results
            })
        },
    },
    mounted() {
        this.update()
        this.timer = setInterval(this.update, 1000)
    },
    beforeDestroy() {
        clearInterval(this.timer)
    },
}
</script>

<style>
    .demo-table-error-row{
        background-color: #ff6600;
        color:rgb(246, 70, 93);
    }
    .buy-green-bg{
        background-color:green;
        color: rgb(28, 185, 80)
    }

</style>
